---
title: Blog Cards
description: Discover modern blog card components built with Tailwind CSS v4. Enhance your marketing pages with responsive, customizable blog cards for posts, articles, and news—optimized for performance and SEO.
category: marketing
emoji: 📰
slug: blog-cards
terms:
  - blog
  - post
components:
  - { title: 'Bordered with image, date, title and excerpt, shadow on hover', dark: true }
  - { title: 'Floating image with title and excerpt', dark: true }
  - { title: 'Bordered with image, title, excerpt and call to action', dark: true }
  - { title: 'Gradient border with date, title and tags, animated gradient on hover', dark: true }
  - { title: 'Bordered with icon, title, excerpt and call to action, shadow on hover', dark: true }
  - { title: 'Artistic with rotated date, image, title, excerpt and call to action,
        shadow on hover', dark: true }
  - { title: 'Background image with overlay containing date, title and excerpt' }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Blog Card Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
